<template>
  <div>
    <el-upload 
      :class="{'hide': hideUploadEdit}" 
      :http-request="Upload" 
      :multiple="true"
      :accept="accept"
      :list-type="listType"
      :file-list="imageUrl"
      :on-remove="removeImage"
      :on-preview="previewImage"
      :limit="limit"
      :disabled="hidden"
      :before-upload="beforeAvatarUpload"
      :on-exceed="handleExceed"
      class="my-se-up"
      action="">
      <el-icon>
        <icon-plus/>
      </el-icon>
      <template #tip>
        <div class="el-upload__tip" v-if="tip">{{tip}}</div>
      </template>
    </el-upload>
  </div>
</template>

<script>
import { client, randomWord } from '@/utils/alioss'
import { ElMessage } from 'element-plus'
import imageViewer from "@/components/imageViewer/index2";

export default {
  props:{
    listType:{
      type: String,
      default: ''
    },
    hidden: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 6
    },
    imageUrl: {
      type: Array,
      default: () => []
    },
    tip:{
      type: String,
      default: ''
    },
    sizeLimit: {
      type: Number,
      default: 1024
    },
    accept: {
      type: String,
      default: '.jpg,.jpeg,.gif,.png'
    },
    beforeUpload:{
      default: undefined,
    }
  },
  data(){
    return {
      dialogVisible: false,
      fileList: [], // 传递图片存储图片
      hideUploadEdit: false,      // 隐藏添加上传按钮
    }
  },
  watch:{
    imageUrl:{
      handler(newValue){
        this.fileList = JSON.parse(JSON.stringify(newValue))
      },
      immediate: true,
      deep: true
    },
    fileList:{
      handler(newValue){
        // console.log("fileList:",newValue,newValue.length,this.limit)
        if(newValue.length >= this.limit){
          this.hideUploadEdit = true
        }else{
          this.hideUploadEdit = false
        }
      },
      immediate: true,
      deep: true,
    }
  },
  methods:{
    Upload(file){
      var fileName = `img/${randomWord(true, 20)}${+new Date()}${file.file.name.substr(file.file.name.indexOf('.'))}`
      client().put(fileName, file.file).then(result => {
        this.fileList.push({
          showUrl: '/' + result.name,
          imageId: file.file.uid,
          url: result.url
        })
        this.$emit('upload', this.fileList)
      }).catch(err => {
        console.log(err)
      })
    },
    removeImage(file){
      const index = this.fileList.findIndex(item => {
        return item.url == file.url
      })
      this.fileList.splice(index, 1)
      this.$emit('upload', this.fileList)
    },
    async beforeAvatarUpload(file){
      if(this.beforeUpload){
        await this.beforeUpload(file);
      }else{
        const size = file.size / 1024
        if (size > this.sizeLimit) {
          ElMessage.error(`上传图片大小不能超过 ${this.sizeLimit}kb!`)
        }
        return size < this.sizeLimit
      }
    },
    previewImage(file){
      if(file.url){
        imageViewer({urlList: [file.url]});
      }
    },
    // 超出时候显示
    handleExceed(){
      ElMessage.error(`不能超过${this.limit}张图片`)
    }
  }
};
</script>

<style lang="scss">
.my-se-up{
  .el-upload{
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: none;
    width: 148px;
    height: 148px;
  }
}
// 隐藏上传按钮
.my-se-up.hide .el-upload--picture-card {
  display: none;
}
</style>
